<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h = "http://java.sun.com/jsf/html"
      xmlns:f = "http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </h:head>
        <h:body>
            <!-- Register Customer
                    Page for adding a customer to the database.
                    Checks email, password etc so that they are correct.
            -->
            <ui:composition template="/WEB-INF/facelets/template.xhtml">
                <ui:param name="title" value = "Register - Chalmers Food Store" />
                <ui:define name="content">
                    <br/>
                    <h1>Register your account:</h1>
                    <hr/>
                    <h:form id="reg">
                        <h:panelGrid columns="3">
                            <h:outputLabel value="First name:" for="fname" />
                            <p:inputText id="fname" value="#{registerBackingBean.fname}" 
                                         title="First name" required="true" requiredMessage="First name is required.">
                                <f:validateRegex pattern="[A-Z a-z]+" />
                                <f:ajax event="blur" render="msg" />
                            </p:inputText> 
                            <p:message id="msg" for="fname" display="text" /> 
                            <h:outputLabel value="Last name:" for="lname" />
                            <p:inputText id="lname" value="#{registerBackingBean.lname}" 
                                         title="Last name" required="true" requiredMessage="Last name is required.">
                                <f:validateRegex pattern="[A-Z a-z]+" />
                                <f:ajax event="blur" render="msg2" />
                            </p:inputText> 
                            <p:message id="msg2" for="lname" display="text" /> 
                            <h:outputLabel value="E-mail:" for="email" />
                            <p:inputText id="email" value="#{registerBackingBean.email}" title="E-mail">
                                <f:validator validatorId="emailValidator" />
                                <f:ajax event="blur" render="msg3" />
                            </p:inputText> 
                            <p:message id="msg3" for="email" display="text"/> 
                            <h:outputLabel value="Password:" for="password" />
                            <p:password level="2" immediate="true" requiredMessage="Password must be at least 6 letters." 
                                        minLength="6" id="password" value="#{registerBackingBean.password}" 
                                        title="Password" required="true" feedback="true">
                                <f:validateLength minimum="6" maximum="20" />
                                <f:ajax event="blur" render="msg4" />
                            </p:password>
                            <p:message id="msg4" for="password" display="text" /> 
                            <h:outputLabel value="Street:" for="street" />
                            <p:inputText id="street" value="#{registerBackingBean.street}" title="Street" />
                            <br/>
                            <h:outputLabel value="City:" for="city" />
                            <p:inputText id="city" value="#{registerBackingBean.city}" title="City" />
                            <br/>
                            <h:outputLabel value="Country:" for="country" />
                            <p:inputText id="country" value="#{registerBackingBean.country}" title="Country" />
                            <br/>
                        </h:panelGrid>
                        <p:commandButton value="Register!" actionListener="#{registerControllerBean.registerCustomer()}" update=":reg" />
                        <!-- Display errors -->
                        <p:messages globalOnly="true" id="statusMessage"></p:messages>
                    </h:form>
                </ui:define>
            </ui:composition>
        </h:body>
</html>
